<template>
	<div class="house">
		<div class="top"></div>
		<!--<mt-header title="仓库管理"  class='head' >
		  <router-link to="/home" slot="left">
		    <i class="material-icons left_1" style="color: #fff;">chevron_left</i>
		  </router-link>
		  <mt-button slot='right' style='margin-right: .3rem;'>
		 		<router-link :to="{path:'/housearch'}" style='color: #fff;'> 
			  	<i class="iconfont icon-shaixuanguolv"></i>
			  	</router-link>
		    </mt-button>
		   
		  
		  <mt-button slot='right' style='margin-left: 1rem;' @click='add()'>
		  	<i class="iconfont icon-jia"></i>
		  </mt-button>
		</mt-header>-->
		<x-header  class='head' :left-options="{backText: ''}">仓库管理
		<a slot="right" >
		 	<router-link :to="{path:'/housearch'}" style='color: #fff;'> 
			  	<i class="iconfont icon-shaixuanguolv"></i>
			  	</router-link>
		</a>
		</x-header>
		
		
		<div class="seach">
			<!--<mt-search v-model="value" placeholder='请输入搜索设备统一编号' ></mt-search>-->
			<input type="text" class="search" placeholder="请输入搜索仓库名称"/>
		</div>
		
		
		
		
		<router-link :to="{path:'/addhouse'}" style='color: #000;'>
		<div class="add" v-show="show">添加仓库</div>
		</router-link>
		
		 <scroller>
		 	
		 <div class="kong"></div>	
		 
		 
		 
		 <div class="scroll" v-for="item in list" :key="item.id">
		 <div class="system-n">
		 	<router-link :to="{path:'/loadhouse'}" style='color: #000;'>	
			<div class="system-top">
				<p>仓库名称</p>	
				<span><i class="material-icons right" >chevron_right</i></span>
				<span >{{item.name}}</span>
			</div>
			<div class="system-con">
				<div class="device-l">
					<p>所属机构：</p><span>{{item.office.shortName}}</span>
					<p>仓库类型：</p><span>{{item.houseType===1?'堆场':'项目'}}</span>
					<p>仓库地址：</p><span>{{item.address}}</span>
				</div>
			</div>
			</router-link>
		</div>
		</div>
		
		

		
		
		</scroller>
		
		
	</div>
</template>

<script>
import { XHeader } from 'vux'
import { warehouse } from '@/service/getdata'
export default {
  components: {
    XHeader
  },
  data() {
    return {
      show: false,
      count: '',
      userId: localStorage.userId,
      token: localStorage.token,
      pageNo: 1,
      pageSize: 10,
      list: []
    }
  },
  mounted() {
    warehouse(this.userId, this.token, this.pageNo, this.pageSize, 1).then(
      res => {
        console.log(res)
        this.list = res.results.list
      }
    )
  },
  methods: {
    add() {
      this.show = !this.show
    }
  }
}
</script>

<style scoped>
.right {
  line-height: 2.5rem;
}
.iconfont {
  font-size: 1.5rem;
}
.seach {
  height: 3.6rem;
  background: #1e82d2;
  position: fixed;
  top: 4.25rem;
  width: 100%;
  z-index: 99;
}
.search {
  width: 92%;
  margin-left: 4%;
  margin-top: 0.8rem;
  background: #1a72b9;
  border: none;
  height: 2rem;
  text-align: center;
  line-height: 2rem;
  color: #fff;
}
.search::-webkit-input-placeholder {
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.2rem;
}
.system-n {
  width: 92%;
  min-height: 3rem;
  background: #fff;
  margin-left: 4%;
  margin-top: 0.5rem;
  border-radius: 6px;
}
.system-top {
  height: 2.5rem;
  background: #fda470;
  border-radius: 6px 6px 0 0;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.system-top p {
  color: #fff;
  line-height: 2.5rem;
  font-size: 0.8rem;
  float: left;
}
.system-top span {
  float: right;
  line-height: 2.5rem;
  color: #fff;
  font-size: 0.8rem;
  height: 2.5rem;
}
.system-con {
  min-height: 3rem;
  padding-left: 0.5rem;
  color: #606063;
  overflow: hidden;
}
.device-l {
  width: 100%;
  min-height: 3rem;
  float: left;
}
.device-l p {
  width: 25%;
}
.device-l span {
  width: 75%;
  display: inline-block;
}
.system-con p {
  font-size: 0.8rem;
  line-height: 2rem;
  color: #888;
  display: inline-block;
}
.system-con span {
  font-size: 0.8rem;
}
.add {
  text-align: center;
  width: 7rem;
  height: 2rem;
  position: absolute;
  right: 0;
  top: 3.5rem;
  background: #fff;
  line-height: 2rem;
  border-radius: 5px;
  z-index: 99;
}
.top {
  position: fixed;
  top: 0;
  width: 100%;
  height: 1.25rem;
  background: #1e82d2;
  z-index: 99;
}
.head {
  position: fixed;
  top: 1.25rem;
  width: 100%;
  background: #1e82d2;
  font-size: 1.125rem;
  height: 3rem;
  z-index: 99;
}
.kong {
  height: 7.85rem;
}
</style>